/**
 * 详情页
 * 
 * @author Gill Gong
 */

import React from 'react'
import { View, Text } from 'react-native'
import Svg, { Circle } from 'react-native-svg'

class SvgView extends React.Component {
  static navigationOptions = () => {
  
    return {
      title: 'Detail'
    }
  }

  constructor(ops) {
    super(ops)

    this.mill = 0
    this.rate = 1
    this.dir = 1
    this.state = { r: 50 }
  }

  render() {

    return (
      <View style={{ flex: 1, height: 1000 }}>
        <Text style={{ 
          fontSize: 50, 
          color: "#333", 
          textAlign:"center",
          borderBottomWidth: 1,
          padding: 15,
          borderBottomColor: "#999" 
        }}>Svg Show</Text>
        <Svg width="100%" height="100%">
          <Circle
            cx="50%"
            cy="40%"
            r={ this.state.r }
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
        </Svg>
      </View>
    )
  }

  componentDidMount() {

    this.reRender()
    //console.warn('Detail component did')
  }

  componentWillUnmount() {

    clearTimeout(this.mill)
    //console.warn('Detail component unmount')
  }

  reRender() {
    let r

    if(this.rate>=3) {
      this.dir = -1
    }else if(this.rate<=1){
      this.dir = 1
    }

    this.rate = this.rate + 0.05 * this.dir
    r = 50 * this.rate

    this.setState({ r }, ()=>{ this.mill = setTimeout(()=>this.reRender(), 0) })
  }
}

export default SvgView
